import { LocalizationContext } from "../../core";

import HorizontalScrollingIcon from "./HorizontalScrollingIcon";
import ScrollMode from "./ScrollMode";
import VerticalScrollingIcon from "./VerticalScrollingIcon";
import WrappedScrollingIcon from "./WrappedScrollingIcon";
import { FC, ReactElement, useContext } from "react";

interface RenderChildren {
  icon: ReactElement;
  label: string;
  onClick(): void;
}

interface SwitchScrollModeDecoratorProps {
  children(props: RenderChildren): ReactElement;
  mode: ScrollMode;
  onClick(): void;
}

const SwitchScrollModeDecorator: FC<SwitchScrollModeDecoratorProps> = ({
  children,
  mode,
  onClick,
}) => {
  const l10n = useContext(LocalizationContext);

  let label = "";
  let icon: ReactElement;

  switch (mode) {
    case ScrollMode.Horizontal:
      label = (l10n && l10n.scrollMode
        ? l10n.scrollMode.horizontalScrolling
        : "Horizontal scrolling") as string;
      icon = <HorizontalScrollingIcon />;
      break;

    case ScrollMode.Wrapped:
      label = (l10n && l10n.scrollMode
        ? l10n.scrollMode.wrappedScrolling
        : "Wrapped scrolling") as string;
      icon = <WrappedScrollingIcon />;
      break;

    case ScrollMode.Vertical:
    default:
      label = (l10n && l10n.scrollMode
        ? l10n.scrollMode.verticalScrolling
        : "Vertical scrolling") as string;
      icon = <VerticalScrollingIcon />;
      break;
  }

  return children({ icon, label, onClick });
};

export default SwitchScrollModeDecorator;
